<template>
  <div id="app">
    <h1>可转债三线查询</h1>
    <div>
      <h3>上传锚文件以供数据分析</h3>
      <input ref="selectFileInput" type="file" name="hookfileName" />
      <button @click="uploadHook">点击上传锚文件</button>
    </div>
    <hr />
    <div>
      <div v-for="(value, key) in tabledatas.data" :key="key">
        <h3 v-if="key === 'uHeavys'">重仓线以下的可转债</h3>
        <h3 v-else-if="key === 'bAddHeavys'">
          大于等于重仓线并且小于加仓线的可转债
        </h3>
        <h3 v-else-if="key === 'bCreatAdds'">
          大于等于加仓线小于建仓线的可转债
        </h3>
        <h3 v-else>大于建仓线的可转债</h3>
        <table border="1">
          <tr>
            <th>名称</th>
            <th>代码</th>
            <th>当前股价</th>
            <th>建仓线</th>
            <th>加仓线</th>
            <th>重仓线</th>
            <th>研究度</th>
            <th>安全度</th>
            <th>评级</th>
            <th>简评</th>
            <th>资质</th>
          </tr>
          <tr v-for="item in value" :key="item.code">
            <td :title="item.name">{{ item.name }}</td>
            <td :title="item.code">{{ item.code }}</td>
            <td :title="item.price">{{ item.price }}</td>
            <td :title="item.creatline">{{ item.creatline }}</td>
            <td :title="item.addline">{{ item.addline }}</td>
            <td :title="item.heavyline">{{ item.heavyline }}</td>
            <td :title="item.research_degree">{{ item.research_degree }}</td>
            <td :title="item.safe_degree">{{ item.safe_degree }}</td>
            <td :title="item.rating">{{ item.rating }}</td>
            <td :title="item.comment">{{ item.comment }}</td>
            <td :title="item.qualification">{{ item.qualification }}</td>
          </tr>
        </table>

        <hr />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, reactive } from "vue";
import Axios from "axios";
import { getXlsData } from "./xls";

// 可转债
class Convertible {
  name = "";
  code = "";
  price = "";
  creatline = "";
  addline = "";
  heavyline = "";
  research_degree = "";
  safe_degree = "";
  rating = "";
  comment = "";
  qualification = "";
}

// 表格数据
class TableData {
  uHeavys: Convertible[] = [];
  bAddHeavys: Convertible[] = [];
  bCreatAdds: Convertible[] = [];
}

export default {
  setup() {
    const tabledatas = reactive({ data: new TableData() });
    const selectFileInput = ref(null);
    // 上传锚文件
    async function uploadHook() {
      const file = selectFileInput.value.files[0];
      if (!file) {
        return alert("请选择文件");
      }

      const hookFileData = await getXlsData(file);
      console.log(hookFileData);
      await Axios.post("api/convertible-hookupdata", hookFileData);
      alert("上传锚文件成功");
      location.reload();
    }
    // 获取全部可转债数据
    Axios.get<TableData>("api/convertible-getdata").then(data => {
      tabledatas.data = data.data;
    });

    return {
      selectFileInput,
      uploadHook,
      tabledatas
    };
  }
};
</script>

<style></style>
